<template>
  <view
    @click="goToComment"
    :style="{ left: elementX + 'px', top: elementY + 'px' }"
    @touchstart="startDrag"
    @touchend="stopDrag"
    @touchmove.prevent="drag"
    class="comment fx-col-c"
  >
    <view class="comment-icon">
      <uv-icon class="" size="42" name="edit-pen"></uv-icon>
    </view>
    <view class="comment-text">写评论</view>
  </view>
</template>
<script setup>
import {ref,getCurrentInstance,onMounted} from 'vue'
import { jump } from '@/utils/index';
const props = defineProps({
  id:String,
  scriptTitle:String,
  initialX: Number,
  initialY: Number
})

const isDragging = ref(false);
const offsetX = ref(0);
const offsetY = ref(0);
const elementX = ref(props.initialX || 0);
const elementY = ref(props.initialY || 0);
const currentObj = getCurrentInstance();

const startDrag = (event) => {
  isDragging.value = true;
  if (event.touches && event.touches.length > 0) {
    const touch = event.touches[0];
    offsetX.value = (touch.clientX - event.currentTarget.offsetLeft).toFixed(1);
    offsetY.value = (touch.clientY - event.currentTarget.offsetTop).toFixed(1);
  }
  //window.addEventListener('touchmove', drag);
};

const drag = (event) => {
  const touch = event.touches[0];
  if (isDragging.value) {
    elementX.value = (touch.clientX - offsetX.value).toFixed(1);
    elementY.value = (touch.clientY - offsetY.value).toFixed(1);
  }
};

const stopDrag = () => {
  console.log('stop')
  isDragging.value = false;
  //window.removeEventListener('touchmove', drag);
};


const goToComment = ()=>{
  jump('/pagesScript/comment/index?scriptId=' + props.id + '&title=' + encodeURIComponent(props.scriptTitle),true)
}

onMounted(() => {
  let width = uni.getWindowInfo().windowWidth;
  let elWidth = 0;
  //let elWidth = rocketRef.value.$el.clientWidth;
  wx.createSelectorQuery().in(currentObj).select('.comment').boundingClientRect(function(rect){
    elWidth = rect.width;
    elementX.value = (width - elWidth - 10) || 0;
    elementY.value = props.initialY || 0;
  }).exec()

});



</script>

<style lang="scss" scoped>

.comment{
  position: fixed;
  right:20rpx;
  bottom:300rpx;
  width: 110rpx;
  height: 110rpx;
  z-index: 10;
  border-radius: 100%;
  background-color: #FBA64D;
  text-align: center;
  &-icon{
  }
  &-text{
    @include main-text5;
  }
}



</style>
